<template>
  <view>
    <uni-group mode="card">
      <view class="title">
        核销、充值汇总：
      </view>
      <view class="info" style="color: #d80000;">
        充值：{{ summary.price }}元（{{ summary.czCount }}次）
      </view>
      <view class="info" style="color: #008800;">
        核销：{{ summary.hxCount }}次
      </view>
    </uni-group>
    <uni-group title="核销、充值历史" margin-top="0">
    <!-- <uni-group title="2024年12月" margin-top="0"> -->
      <uni-list :border="false">
      	<!-- <uni-list-item direction="row">
          <template v-slot:header>
            <view class="slot-header">
              <view class="title">
                核销
              </view>
              <view class="info">
                2024年12月18日 08:55:17
              </view>
            </view>
          </template>
          <template v-slot:footer>
            <view class="slot-footer">
              <view class="num">
                -1次
              </view>
              <view class="left">
                剩余：19次
              </view>
            </view>
          </template>
        </uni-list-item> -->
      	<uni-list-item v-for="item in list" direction="row">
      	  <template v-slot:header>
      	    <view class="slot-header">
      	      <view class="title">
      	        {{ item.type ? '核销' : '充值' }} 
                <text style="font-size: 27rpx; font-weight: normal;">
                  {{ item.type == 0 ? `（${item.price}元）` : '' }}
                </text>
      	      </view>
      	      <view class="info">
                {{ getDateTime(item.id) }}
      	      </view>
      	    </view>
      	  </template>
      	  <template v-slot:footer>
      	    <view class="slot-footer">
      	      <view class="num" :class="{cz: item.type==0}">
      	        {{ item.type ? '-' : '+' }}{{item.count}}次
      	      </view>
      	      <view class="left">
      	        剩余：{{item.countLeft}}次
      	      </view>
      	    </view>
      	  </template>
      	</uni-list-item>
      </uni-list>
    </uni-group>
    <!-- <uni-group title="2024年11月" margin-top="0">
      <uni-list :border="false">
      	<uni-list-item direction="row">
      	  <template v-slot:header>
      	    <view class="slot-header">
      	      <view class="title">
      	        核销
      	      </view>
      	      <view class="info">
      	        2024年11月18日 08:55:17
      	      </view>
      	    </view>
      	  </template>
      	  <template v-slot:footer>
      	    <view class="slot-footer">
      	      <view class="num">
      	        -1次
      	      </view>
      	      <view class="left">
      	        剩余：19次
      	      </view>
      	    </view>
      	  </template>
      	</uni-list-item>
      	<uni-list-item direction="row">
      	  <template v-slot:header>
      	    <view class="slot-header">
      	      <view class="title">
      	        充值
      	      </view>
      	      <view class="info">
      	        2024年11月17日 18:05:17
      	      </view>
      	    </view>
      	  </template>
      	  <template v-slot:footer>
      	    <view class="slot-footer">
      	      <view class="num cz">
      	        +20次
      	      </view>
      	      <view class="left">
      	        剩余：19次
      	      </view>
      	    </view>
      	  </template>
      	</uni-list-item>
      </uni-list>
    </uni-group> -->
  </view>
</template>

<script>
  import { getHistoryList } from '../../utils/storage.js'
  import { getDateTime } from '../../utils/tools.js'
  export default {
    name:"History",
    props: {
      list: {
        type: Array,
        required: true
      },
      summary: {
        type: Object,
        default: {
          price: 0,
          czCount: 0,
          hxCount: 0
        }
      }
    },
    data() {
      return {
      }
    },
    methods: {
      getDateTime
    }
  }
</script>

<style scoped>
:deep(.uni-group__content) {
  padding: 0;
}

.uni-list-item__container {
  justify-content: space-between;
}

.title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.info {
  font-size: 25rpx;
  color: #666;
  margin-top: 25rpx;
}

.slot-footer .num {
  font-size: 40rpx;
  color: #008800;
  text-align: right;
}
.slot-footer .left {
  font-size: 22rpx;
  font-weight: bold;
  margin-top: 15rpx;
  color: #333;
}
.num.cz {
  color: #d80000;
}

.uni-group--card {
  margin: 0;
  padding: 30rpx;
  background-color: #fff3e2;
  box-shadow: none;
}
</style>